html {
    height: 17.786667rem;
}

body {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    background-color: #fff;
}

.header {
    width: 100%;
    height: 2.133333rem;
    padding: .266667rem;
    img {
        width: 1.6rem;
        height: 1.6rem;
    }
}

h3 {
    text-align: center;
    margin-top: .533333rem;  //20
    color: #333;
    font-size: .933333rem;  //35
    margin-bottom: 2.133333rem;
}

.c-style1 {
    width: 75%;
    height: 4rem;
    margin: 0 auto;
    display: flex;
    border-radius: 2.666667rem;
    background-color: #f2f4f7;
    padding: .133333rem;
    margin-bottom: 1.066667rem;
    p {
        flex: 1.5;
        // height: 100%;
        text-align: center;
        line-height: 4rem;
        color: #333;
        font-size: .8rem;
    }
    .warm-box {
        flex:3.5;
        // background-color: yellow;
        display: flex;
        .colorbox {
            flex: 1;
            // background-color: #333;
            position: relative;
            .bgcbox {
                position: absolute;
                top:50%;
                left: 50%;
                transform: translate(-50%,-50%);
                // margin: 0 auto;
                width: 2.133333rem;
                height: 2.133333rem;
                border-radius: 2.133333rem;
                background-color: white;
            }
            img {
                position: absolute;
                top:50%;
                left: 50%;
                transform: translate(-50%,-50%);
                width: 1.866667rem;
                height: 1.866667rem;
                border-radius: 1.866667rem;
            }
        }
    }
}


.nextbutton{
    width: 70%;
    margin: 9.333333rem auto;
    button {
        width: 100%;
        // margin: 0 auto;
        color: #fff;
        background-color: #7be4ee;
        border:none;
        height: 2.666667rem;
        border-radius: 2.666667rem;
        font-size: .666667rem;
    }
}